<#assign base=request.contextPath />

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${base}/img/asset-favicon.ico">
    <title>在线教育网</title>

    <link rel="stylesheet" href="${base}/plugins/normalize-css/normalize.css"/>
    <link rel="stylesheet" href="${base}/css/page-learing-article.css"/>
    <link rel="stylesheet" href="${base}/plugins/normalize-css/normalize.css"/>
    <link rel="stylesheet" href="${base}/plugins/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="${base}/css/page-learing-index.css"/>
    <link rel="stylesheet" href="${base}/css/loading.css"/>

    <style type="text/css">

        [v-cloak] {
            display: none;
        },
        .collect{

        }
    </style>
</head>

<body data-spy="scroll" data-target="#articleNavbar" data-offset="150">
<!-- 页面头部 -->
<!--头部导航-->
<#include "header.ftl">
<!--课程基本信息-->
<div class="article-banner">
    <div class="banner-bg"></div>
    <div class="banner-info"  id="banner-info">
        <div class="banner-left">
            <p><i style="cursor: pointer">课程</i>
                <span>\
                    <!--课程分类-->
                    <i class="classify-name" style="cursor: pointer">classify.name</i>
                </span>
            </p>
            <!--课程名称-->
            <p class="tit">${course.name}</p>

            <p class="info">
                <a href="#">马上学习</a>
                <span>
                    <em>难度等级</em>
                    <!--难度等级-->
                    <i>
                        <#if course.level=1>
                            初级
                        <#elseif course.level=2>
                            中级
                        <#elseif course.level=3>
                            高级
                        </#if>
                    </i>
                </span>
                <span>
                    <em>课程时长</em>
                    <!--课程时长-->
                ${course.hours}小时${course.minutes}分
                </span>
                <span>
                    <em>评分</em>
                    <!--课程评分-->
                ${course.avgScope}分
                </span>
            </p>
        </div>
        <div class="banner-rit">
            <p>
                <!--课程预览图-->
                <img src="${course.picture}" width="228px" height="156px" alt="图片加载中">
            </p>
            <p class="vid-act">
                <span>
                    <i @click="collect"  :class="{'i-heart-collect':isCollect==1}" class="i-heart"></i>
                    <i>${course.collectionNum}</i>
                    <i>人收藏</i>
                    <!--收藏人数-->
                </span>
            </p>
        </div>
    </div>
</div>
<!--课程基本信息/-->

<!--详细信息-->
<div class="article-cont">
    <!--详细信息导航条-->
    <div class="tit-list">
        <a href="javascript:" id="articleClass" class="active">课程介绍</a>
        <a href="javascript:" id="articleItem">目录</a>
        <a href="javascript:" id="artcleAsk">问答</a>
        <a href="javascript:" id="artcleCod">评价</a>

    </div>
    <!--详细信息导航条/-->

    <!--详细信息-->
    <div class="article-box">
        <!--课程介绍-->
        <div class="articleClass" style="display: block">
            <div class="rit-title">评价</div>
            <div class="article-cont">
                <div class="article-left-box">
                    <div class="content">
                        <!--1.课程介绍-->
                        <div class="content-com about">
                            <div class="title"><span>课程介绍</span></div>
                            <div class="cont cktop">
                                <div class="drop-down">
                                    <!--课程介绍内容-->
                                    <p>
                                    ${course.introduction}
                                    </p>
                                </div>
                                <span class="on-off" style="cursor: pointer;">更多 <i class="i-chevron-bot"></i></span>
                            </div>
                        </div>
                        <!--1.课程介绍/-->

                        <!--2.适用人群-->
                        <div class="content-com suit">
                            <div class="title"><span>适用人群</span></div>
                            <div class="cont cktop">
                                <div class="drop-down">
                                    <!--适用人群内容-->
                                    <p>
                                    ${course.crowd}
                                    </p>
                                </div>
                                <span class="on-off" style="cursor: pointer;">更多 <i class="i-chevron-bot"></i></span>
                            </div>
                        </div>
                        <!--2.适用人群/-->

                        <!--3.课程制作人信息-->
                        <div class="content-com course">
                            <div class="title"><span>课程制作</span></div>
                            <div class="cont">
                                <div class="img-box">
                                    <img class="teacher-head" src="" alt="头像加载中"></div>
                                <div class="info-box">
                                    <p class="name">教学方：<em class="teacher-name">teacher.name</em></p>
                                    <p class="lab teacher-label">teacher.label</p>
                                    <p class="info teacher-introduction">teacher.introduction</p>
                                    <p>
                                        <span>难度等级</span>
                                         <#if course.level=1>
                                             初级
                                         <#elseif course.level=2>
                                             中级
                                         <#elseif course.level=3>
                                             高级
                                         </#if>
                                    </p>
                                    <p><span>课程时长</span>8-16小时/周，共4周</p>

                                    <p><span>用户评分</span>平均用户评分 <em>4.9</em> <a href="#">查看全部评价</a></p>

                                </div>
                            </div>
                        </div>
                        <!--3.课程制作人信息/-->

                    </div>
                </div>
                <div class="article-right-box">
                    <div class="comment">
                        <!--<div class="tit">评论</div>-->
                        <div class="com-cont">
                            <div class="item">
                                <div class="top-info">
                                    <!--头像-->
                                    <img src="${base}/img/widget-pic.png"
                                         width="30px"
                                         alt="">
                                    <div class="info">
                                        <!--昵称-->
                                        <p>毛老师</p>
                                        <p>
                                            <!--评分，有几分就有几个i标签-->
                                            <i class="i-star"></i>
                                            <i class="i-star"></i>
                                            <i class="i-star"></i>
                                        </p>
                                    </div>
                                    <!--时间-->
                                    <div class="time">2017-2-19</div>
                                </div>
                                <div class="but-info">
                                    <!--部分评价内容-->
                                    <span>有趣的课程，可以对函数式编程产生初步的认识，值的一学。获得的毕业证书……</span>
                                </div>
                            </div>

                            <div class="go-pingjia">
                                <!--总评价人数-->
                                213人评价
                                <a href="#">去评价 ></a>
                            </div>
                        </div>
                    </div>
                    <div class="learing-box">
                        <!--课程学习人数-->
                        <div class="tit">2313人在学习该课程</div>
                        <!--最近学习该课程的用户-->
                        <div class="com-cont">
                            <!--
                                最近学习该课程的用户
                                每个a标签是一个用户
                                最多循环12次
                            -->
                            <a href="#" class="item">
                                <p>
                                    <!--头像-->
                                    <img src="${base}/img/widget-pic.png"
                                         width="30px"
                                         alt="">

                                </p>
                                <!--昵称-->
                                <p>毛老师</p>
                            </a>
                            <a href="#" class="item">
                                <p><img src="${base}/img/widget-pic.png"
                                        width="30px" alt="">
                                </p>
                                <p>毛老师</p>
                            </a>


                        </div>
                        <!--最近学习该课程的用户/-->
                    </div>
                </div>
            </div>
        </div>
        <!--课程介绍/-->

        <!--目录-->
        <div class="articleItem" style="display: none">
            <div class="article-cont-catalog">

                <!--目录列表-->
                <div class="article-left-box">
                    <div class="content" id="chapter">
                        <!--章开始
                            每个<div class="item">是一章
                        -->
                        <div class="item">
                            <div class="title" style="cursor:pointer"><i class="i-chevron-bot"></i>
                                <!--章标题-->
                                <span>第一阶段 HTTP协议基础详解</span>
                                <!--章时长-->
                                <span class="time">8小时</span>
                            </div>
                            <div class="about">
                                <!--章介绍-->
                                <span>
                                			使用Java消息中间件处理异步消息成为了分布式系统中的必修课，
                                			通过本门课程可以深入浅出的学习如何在Java中使用消息中间件并且一步一步打造更优雅的最佳实践方案。
                                		</span>

                            </div>
                            <div class="drop-down">
                                <ul class="list-box">
                                    <!--
                                        节列表，每个li标签是一节
                                        class="active"为正在学习的节
                                    -->
                                    <li class="active">
                                        <i style="cursor:pointer">1.1 阅读：分级政策细节</i>
                                        <!--节时长-->
                                        <span>97’33”</span>
                                    </li>
                                    <li>
                                        <i style="cursor:pointer">1.2 视频：为什么分为 A 部分、B 部分、C 部分</i>
                                        <span>66’15”</span>
                                    </li>

                                    <!--节列表/-->
                                </ul>
                            </div>
                        </div>
                        <!--第一章/-->


                    </div>
                </div>
                <!--目录列表/-->

                <!--教学方信息-->
                <div class="article-right-box">
                    <div class="about-teach">
                        <div class="teach-info">
                            <!--教学方头像-->
                            <img src="" class="teacher-head" alt="头像加载中" width="90px">
                            <div>
                                <p>教学方：<span class="teacher-name">teacher.name</span></p>
                                <p class="about teacher-label">teacher.label</p>
                            </div>
                        </div>
                        <p><a href="#" class="teacher-course-href">TA的课程</a></p>
                        <!--教学方介绍-->
                        <p class="synopsis teacher-introduction">
                            teacher.introduction
                        </p>
                    </div>

                    <!--看过该课的同学也在看-->
                    <div class="learing-box">
                        <div class="tit">看过该课的同学也在看</div>
                        <div class="item-box">
                            <div class="item-list hov">
                                <div class="infobox" style="cursor:pointer;">
                                    <div class="morebox">
                                        <p class="top-tit">前端小白入门</p>
                                        <p class="top-lab">Web前端攻城狮培养计划</p>
                                        <p class="top-num">2589646次播放<span>4.8分</span></p>
                                    </div>
                                    <a>Linux 达人养成记</a>
                                </div>
                            </div>

                            <div class="item-list hov">
                                <div class="infobox">
                                    <div class="morebox">
                                        <p class="top-tit">前端小白入门</p>
                                        <p class="top-lab">Web前端攻城狮培养计划</p>
                                        <p class="top-num">2589646次播放<span>4.8分</span></p>
                                    </div>
                                    <a>Linux 达人养成记</a>
                                </div>
                            </div>

                        </div>
                    </div>
                    <!--看过该课的同学也在看/-->
                </div>
                <!--教学方介绍/-->

            </div>
        </div>
        <!--目录/-->

        <!--问答-->
        <div class="artcleAsk" style="display: none" id="ask">
            <div class="article-cont-ask">
                <!--问答列表-->
                <div class="article-left-box">
                    <div class="content">

                        <!--筛选列表-->
                        <div class="content-title">

                            <p>
                                <!--筛选问题类型-->
                                <a class="all">全部</a>
                                <a>精选</a>
                                <a>我的</a>
                            </p>

                            <p>
                                <a :class="{all: chapterId==0}" @click="filterChapter(-1)"
                                   href="javascript:void(0)">全部</a>
                                <span>
                                    <!--筛选章节-->
                                    <a v-for="(chapter,index) in chapters" :class="{all: chapterId==chapter.id}"
                                       @click="filterChapter(index)" :key="chapter.id" href="javascript:void(0)">
                                        {{chapter.num}}</a>
                                </span>
                                <a href="javascript:void(0)" class="more">更多 <i class="i-chevron-bot"></i></a>
                            </p>
                        </div>
                        <!--筛选列表结束-->

                        <div v-cloak="">
                            <!--问题-->
                            <div class="item" v-for="(question,index) in questions">
                                <div class="item-left">
                                    <p><img :src="question.user.head" width="60px" alt="">
                                    </p>
                                    <p v-text="question.user.nickname"></p>
                                </div>
                                <div class="item-right">
                                    <p @click="getQuestionInfo(question.id)" class="title" style="cursor: pointer;" v-text="question.title"></p>
                                <#--最新回答-->
                                    <p v-if="question.answer.id!=0">
                                        <!--最新回答-->
                                        <i>
                                            {{question.answer.content}}
                                        </i>
                                        <br/> 【最新
                                        <!--最新回答用户昵称-->
                                        <i class="new" style="cursor: pointer;" v-if="question.answer.id!=0">
                                            {{question.answer.user.nickname}}</i>
                                        的回答】
                                    </p>

                                <#--没有最新回答-->
                                    <p v-if="question.answer.id==0" @click="getQuestionInfo(question.id)">
                                        <!--if如果没有任何回答-->
                                        <span style="cursor: pointer;">我来回答</span>
                                        <!--if如果没有任何回答/-->
                                    </p>
                                    <p>
                                        {{timestampToTime(question.createTime)}}
                                        <span class="action-box">
                                        <span>
                                            <i class="i-answer"></i>
                                            回答 {{question.replyNum}}
                                        </span>
                                        <span>
                                            <i class="i-browse"></i>
                                            浏览 {{question.browseNum}}
                                        </span>
                                        <span v-if="question.delFlag==1">
                                            <i class="i-del"></i>
                                            删除
                                        </span>
                                    </span>
                                    </p>
                                </div>
                            </div>
                            <!--问题/-->

                            <!--显示更多问题-->
                            <div class="itemlast" v-show="!loadingQuestion">
                                <a href="javascript:void(0)" class="overwrite" @click="getMore">{{footerText}}</a>
                            </div>
                            <!--显示更多问题/-->

                            <!--加载等待动画-->
                            <div class="loading" v-show="loadingQuestion">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                            </div>
                        </div>

                    </div>
                </div>
                <!--问答列表/-->

                <!--教学方-->
                <div class="article-right-box">
                        <!--发表问题-->
                        <div class="question-butte" style="cursor: pointer" @click="makeQuestion()">
                            <i class="i-problem"></i>我有问题
                        </div>
                    <div class="about-teach">
                        <div class="teach-info">
                            <!--教学方头像-->
                            <img src="" class="teacher-head" alt="头像加载中" width="90px">
                            <div>
                                <p>教学方：
                                    <!--教学方名称-->
                                    <span class="teacher-name">teacher.name</span>
                                </p>
                                <!--教学方标签-->
                                <p class="about teacher-label">teacher.label</p>
                            </div>
                        </div>
                        <p>
                            <!--教学方发布的课程-->
                            <a href="" class="teacher-course-href">TA的课程</a>
                        </p>
                        <!--教学方介绍-->
                        <p class="synopsis teacher-introduction">teacher.introduction</p>
                    </div>
                    <!--看过该课的同学也在看-->
                    <div class="learing-box">
                        <div class="tit">看过该课的同学也在看</div>
                        <div class="item-box">
                            <!--看过该课的同学也在看课程1-->
                            <div class="item-list hov">
                                <div class="infobox">
                                    <div class="morebox">
                                        <p class="top-tit">前端小白入门</p>
                                        <p class="top-lab">Web前端攻城狮培养计划</p>
                                        <p class="top-num">2589646次播放<span>4.8分</span></p>
                                    </div>
                                    <a>Linux 达人养成记</a>
                                </div>
                            </div>
                            <!--看过该课的同学也在看课程1/-->

                            <!--看过该课的同学也在看课程2-->
                            <div class="item-list">
                                <div class="infobox">
                                    <div class="morebox">
                                        <p class="top-tit">前端小白入门</p>
                                        <p class="top-lab">Web前端攻城狮培养计划</p>
                                        <p class="top-num">2589646次播放<span>4.8分</span></p>
                                    </div>
                                    <a>Linux 达人养成记111</a>
                                </div>
                            </div>
                            <!--看过该课的同学也在看课程2/-->
                        </div>
                    </div>
                    <!--看过该课的同学也在看/-->
                </div>
                <!--教学方/-->
            </div>
        </div>
        <!--问答/-->

        <!--笔记-->
        <!--笔记/-->

        <!--评价-->
        <div class="artcleCod" style="display: none;" id="comment">
            <div class="article-cont">
                <div class="article-left-box">
                    <div class="comment-box">
                        <!--发表评论-->
                        <div class="evaluate">
                            <!--评论评分-->
                            <div class="eva-top">
                                <div class="tit">课程评分</div>
                                <div class="star">
                                    <div class="score"><i>5</i></div>
                                </div>
                                <span class="star-score">
											<!--用户选择的评分-->
											<i id="scope">5</i>
											分
										</span>
                            </div>
                            <div class="eva-cont">
                                <div class="tit">学员评语</div>
                                <div class="text-box">
                                    <!--评论内容-->
                                    <label>
                                        <textarea class="form-control" style="width: 654px;resize: none;" id="content"
                                                  rows="5" placeholder="写下你的评论" v-model="content"></textarea>
                                    </label>
                                    <div class="btn btn-primary" style="float: left;" @click="addComment">
                                        <!--提交评论按钮-->
                                        <span>发表评论</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--发表评论-->

                        <div class="course-evaluate">
                            <!--评分-->
                            <div class="top-cont">
                                <div class="cont-top-left">
                                    <div class="star-scor">
                                        <div class="star-show">
                                            <div class="score"><i>5</i></div>
                                        </div>
                                        <!--评分-->
                                        <div class="scor">${course.avgStr}分</div>
                                    </div>
                                    <!--总评分-->
                                    <div class="all-scor">总评分：${course.totalScope}</div>
                                </div>
                                <div class="cont-top-right">
                                    <div class="star-grade">五星
                                        <div class="grade">
                                            <div class="grade-percent"><span></span></div>
                                            <div class="percent-num">
                                                <!--4.0以上的评分占比，修改i标签内的值会影响柱状图-->
                                                <i>50</i>%
                                            </div>
                                        </div>
                                    </div>
                                    <div class="star-grade">四星
                                        <div class="grade">
                                            <div class="grade-percent"><span></span></div>
                                            <div class="percent-num">
                                                <i>18</i>%
                                            </div>
                                        </div>
                                    </div>
                                    <div class="star-grade">三星
                                        <div class="grade">
                                            <div class="grade-percent"><span></span></div>
                                            <div class="percent-num">
                                                <i>0</i>%
                                            </div>
                                        </div>
                                    </div>
                                    <div class="star-grade">二星
                                        <div class="grade">
                                            <div class="grade-percent"><span></span></div>
                                            <div class="percent-num">
                                                <i>32</i>%
                                            </div>
                                        </div>
                                    </div>
                                    <div class="star-grade">一星
                                        <div class="grade">
                                            <div class="grade-percent"><span></span></div>
                                            <div class="percent-num">
                                                <i>0</i>%
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--评分/-->

                            <!--评论列表-->
                            <div class="comment-item-box">
                                <div class="title">评论
                                    <span>
                                        <!--评论总数量-->
                                        <i>${course.scopeNum}</i>条评论
                                    </span>
                                </div>
                                <!--评论列表开始-->
                                <div class="item" v-for="comment in comments" :key="comment.id">
                                    <div class="item-left">
                                        <p>
                                            <!--评论用户头像-->
                                            <img :src="comment.user.head" class="img-circle"
                                                 width="60px" alt="">
                                        </p>
                                        <!--评论用户昵称-->
                                        <p v-text="comment.user.nickname"></p>
                                    </div>
                                    <div class="item-cent">
                                        <!--评论内容-->
                                        <p v-text="comment.content"></p>
                                        <!--评论发表时间-->
                                        <p class="time" v-text="timestampToTime(comment.createTime)"></p>
                                    </div>
                                    <div class="item-rit">
                                        <p>
                                        <div class="star-show">
                                            <div class="score">
                                                <i v-text="comment.scope"></i>
                                            </div>
                                        </div>
                                        </p>
                                        <p>评分
                                            <!--评论评分-->
                                            <span v-text="comment.scope"></span>
                                        </p>
                                    </div>
                                </div>
                                <!--评论列表结束-->

                                <!--查看更多评论-->
                                <div class="get-more" @click="getMore" v-text="footerText"></div>
                            </div>
                            <!--评论列表/-->

                        </div>
                    </div>
                </div>

                <!--教学方信息。。。-->
                <div class="article-right-box">
                    <div class="about-teach">
                        <div class="teach-info">
                            <img class="teacher-head" src="" alt="头像加载中" width="90px">
                            <div>
                                <p>教学方：<span class="teacher-name">teacher.name</span></p>
                                <p class="about teacher-label">teacher.label</p>
                            </div>
                        </div>
                        <p><a href="teacher.id" class="teacher-course-href">TA的课程</a></p>
                        <p class="synopsis teacher-introduction">teacher.introduction</p>
                    </div>
                </div>
                <!--教学方信息/-->
            </div>
        </div>
        <!--评价/-->
    </div>
</div>
<!--详细信息/-->

<!-- 页面底部 -->
<!--底部版权-->
<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-7">
                test
            </div>
            <div class="col-md-5 row">
                <dl class="col-md-4">
                    <dt>test</dt>
                    <dd>test</dd>

                </dl>
                <dl class="col-md-4">
                    <dt>test</dt>
                    <dd>test</dd>

                </dl>
                <dl class="col-md-4">
                    <dt>test</dt>
                    <dd>test</dd>
                    <dd>test</dd>
                </dl>
            </div>
        </div>
    </div>
</footer>

<!-- 页面js -->
<script type="text/javascript" src="${base}/plugins/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="${base}/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="${base}/js/vuejs-2.5.16.js"></script>
<script src="${base}/js/axios-0.18.0.js"></script>
<script id="testScript" src="${base}/js/article.js"
        isLogin=
        <#if Session["user"]??>
        "true"
        <#else >
        "false"
        </#if>
        courseId="${courseId}" base="${base}"></script>


<script>
    $('#${page}').addClass('active');

    //加载教师信息
    $(function () {
        $.ajax({
            type: 'GET',
            url: '${base}/teacher/${course.teacherId}',
            contentType: 'application/json; charset=utf-8',
            success: function (m) {
                //渲染数据
                $(".teacher-name").html(m.data.name);
                $(".teacher-label").html(m.data.label);
                $(".teacher-head").attr("src", m.data.head);
                $(".teacher-introduction").html(m.data.introduction);
            }
        })
    });


    //课程分类
    $(function () {
        $.ajax({
            type: 'GET',
            url: '${base}/classify/info/${course.classifyId}',
            contentType: 'application/json; charset=utf-8',
            success: function (m) {
                if (200 === m.code) {
                    $(".classify-name").html(m.data.name)
                }
            }
        })
    });

    //章节列表
    $(function () {
        $.ajax({
            type: 'GET',
            url: '${base}/chapter',
            contentType: 'application/json; charset=utf-8',
            data: {
                courseId: ${course.id}
            },
            success: function (m) {
                if (200 === m.code) {
                    var chapter = '';
                    var first = true;//是否是新的一章
                    $.each(m.data, function (i, val) {
                        if (val.parent === 0) {//章
                            if (i !== 0) {//上一章结束
                                chapter += '</ul></div></div>';
                            }
                            first = true;//新的一章
                            chapter += '<div class="item"><div class="title" style="cursor:pointer"><i class="i-chevron-bot"></i><span>' +
                                    val.title + '</span><span class="time">' + val.hours + '小时</span> </div><div class="about">' +
                                    val.introduction + '</div>';
                        } else {//节
                            if (first) {//第一节
                                chapter += '<div class="drop-down"><ul class="list-box">';
                                first = false;
                            }
                            chapter += '<li class="active"> <a target="_blank" href="${base}/chapter/video/${courseId}/'+val.id+'">' +
                                    '<i style="cursor:pointer">' +
                                    val.title + '</i><span>' + val.hours + 'h' + val.minutes + 'm</span> </li></a>';
                        }

                    });
                    $("#chapter").html(chapter);
                    //激活点击下拉
                    ckMove('.article-cont .article-left-box', '.title', 0);

                }
            }
        })

    });

    //点击下拉
    //用法：HTML 点击事件为more,父级使用overflow：hidden；限定高 more与要展开的内容为同级 要展开内容添加 drop-down的class
    function ckMove(target, ckgar, het, text, incr) {
        var inc = incr ? incr : 0;
        $(target).find(ckgar).on('click', function () {
            var h = $(this).parent().find('.drop-down ul').height();
            if (!$(this).hasClass('act')) {
                $(this).addClass('act');
                $(this).parent().find('.drop-down').css({
                    'height': (h + inc) + 'px'
                });
                $(this).find('i').removeClass('i-chevron-bot').addClass('i-chevron-top')
            } else {
                $(this).removeClass('act');
                $(this).parent().find('.drop-down').css({
                    'height': het + 'px'
                });
                $(this).find('i').removeClass('i-chevron-top').addClass('i-chevron-bot')
            }
        })
    }

    $(function () {


        $('.learing-box .item-list').mouseover(function (e) {
            $(this).css({
                'height': '140px'
            }).addClass('hov').siblings().css({
                'height': '50px'
            });
            $(this).siblings().removeClass('hov')
        });
        $('.learing-box .item-box').mouseout(function () {
            $(this).find('.item-list:first').css({
                'height': '140px'
            }).addClass('hov');
            $(this).find('.item-list:first').siblings().css({
                'height': '50px'
            }).removeClass('hov')
        })
    });
    $(function () {
        $('.learing-box .item-list').mouseover(function (e) {
            $(this).css({
                'height': '140px'
            }).addClass('hov').siblings().css({
                'height': '50px'
            });
            $(this).siblings().removeClass('hov')
        });
        $('.learing-box .item-box').mouseout(function () {
            $(this).find('.item-list:first').css({
                'height': '140px'
            }).addClass('hov');
            $(this).find('.item-list:first').siblings().css({
                'height': '50px'
            }).removeClass('hov')
        })
    });
    $(function () {
        $('.active-box span').click(function () {
            $(this).css({
                'color': '#00a4ff'
            });
            if ($(this).find('i').hasClass('i-laud')) {
                $(this).find('.i-laud').css('background-position', '-80px -19px')
            } else if ($(this).find('i').hasClass('i-coll')) {
                $(this).find('.i-coll').css('background-position', '1px -75px')
            }
        });
        $('.learing-box .item-list').mouseover(function (e) {
            $(this).css({
                'height': '140px'
            }).addClass('hov').siblings().css({
                'height': '50px'
            });
            $(this).siblings().removeClass('hov')
        });
        $('.learing-box .item-box').mouseout(function () {
            $(this).find('.item-list:first').css({
                'height': '140px'
            }).addClass('hov');
            $(this).find('.item-list:first').siblings().css({
                'height': '50px'
            }).removeClass('hov')
        })
    });
    //评分
    $(function () {
        //评分
        $('.star .score').map(function (n, i) {
            var x = Number($(this).find('i').text());
            var w = 109 * (1 - x / 5);
            $(this).css('width', w + 'px');
        });
        //评论打分
        $('.evaluate .star').mousemove(function (e) {
            var startX = $(this).offset().left;
            var movX = e.clientX - startX + 0.5;
            var w = 145 * (1 - movX / 145);
            $(this).find('.score').css('width', w + 'px');
            $('.star-score i').text((movX / 145 * 5).toFixed(1))
        });
        //星级评分
        $('.grade').map(function (n, i) {
            var pret = $(this).find('.percent-num i').text();
            var wt = $(this).find('.grade-percent').width();
            $(this).find('.grade-percent span').css('width', wt * pret / 100);
        })
    });

    $(function () {
        //点击下拉
        function ckMove2(target, het, text, incr) {
            var inc = incr ? incr : 0;
            $(target).find('.on-off').on('click', function () {
                var h = $(this).parent().find('.drop-down p').height();
                if (!$(this).hasClass('act')) {
                    $(this).addClass('act');
                    $(this).parent().find('.drop-down').css({
                        'height': (h + inc) + 'px'
                    });
                    $(this).find('i').removeClass('i-chevron-bot').addClass('i-chevron-top')
                } else {
                    $(this).removeClass('act');
                    $(this).parent().find('.drop-down').css({
                        'height': het + 'px'
                    });
                    $(this).find('i').removeClass('i-chevron-top').addClass('i-chevron-bot')
                }
            })
        }

        ckMove2('.cktop', 60);
        ckMove2('.cont .item', 0);


        $('.tit-list a').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            var clasNod = '.' + $(this)[0].id;
            $(clasNod).show().siblings().hide()
        });
    })
</script>

</body>
